<template>
  <div class="">
  	<div class="someTop shuiweiSomeTop clear_float">
		<div class="check_box_C" :class="type.hedao ? 'active_leixin' : '' " @click="selectType('hedao')">
			<span class="check_box"></span>
			<span>河道</span>
		</div>
		<div class="check_box_C" :class="type.shuiku ? 'active_leixin' : '' " @click="selectType('shuiku')">
			<span class="check_box"></span>
			<span>水库</span>
		</div>
		<div class="float_right">详情</div>
	</div>
	<div id="echartShuiwei" class="echartShuiwei echart_box_all">

	</div>
  </div>
</template>

<script>
import topTitle from './top';
//import json from "../../assets/json/reservoirInfo.json";
import echarts from 'echarts'
export default {
    props:["msg"],
	components: {
        topTitle,
    },
	data() {
		return {
			title:{
				name: "水位信息",
				time: "2018-10-22 16:13",
			},
			type:{
				hedao:true,shuiku:false,
			},
			data:{

			}
		}
	},
	methods:{
		refreshAll(){
			setTimeout(()=>{
				this.refreshEchartHeight();
				this.charts.resize();
			},1000)
		},
        closeThis(){
            this.$emit('closep',this.msg.name)
		},
		selectType(type){
			if(type=="hedao"){
				this.type.hedao=true;
				this.type.shuiku=false;
			}else{
				this.type.shuiku=true;
				this.type.hedao=false;
			};
			var _data;
			if(this.type.hedao){
				_data=this.data.H;
			}else{
				_data=this.data.R;
			};

			setTimeout(()=>{
				this.doEchart(_data);
			},1000)
		},
		refreshEchartHeight(){
			var height=$(".qop")[0].clientHeight-$(".indexComTop")[0].clientHeight-$(".shuiweiSomeTop")[0].clientHeight;
			$(".echartShuiwei").css("height",height)
		},
		doEchart(data){
			// var data=json.DS.R;
			var x=[];
			var y1=[];
			var y2=[];
			for(var i=0;i<data.length;i++){
//				x.push(data[i].STNM);
//				y1.push(data[i].MAX_Z);
//				y2.push(data[i].Z);
			};

			this.refreshEchartHeight();
			this.charts = echarts.init(document.getElementById("echartShuiwei"));
			this.charts.setOption({
			 	backgroundColor: 'rgba(15,55,95,0.1)',
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					},
					formatter:function(val) {
						var c=y1[val[0].dataIndex]-y2[val[0].dataIndex];
							c=c.toFixed(2)
						return "<div>"+x[val[0].dataIndex]+"</div>"
								+"<div><span>警戒/汛期水位：</span><span>"+y1[val[0].dataIndex]+"m</span></div>"
								+"<div><span>水位：</span><span>"+y2[val[0].dataIndex]+"m</span></div>"
								+"<div><span>差值：</span><span>"+c+"m</span></div>"
					}
				},
				legend: {
					data: ['警戒/汛期水位', '水位'],
					textStyle: {
						color: '#333'
					}
				},
				xAxis: {
					data: x,
					axisLine: {
						lineStyle: {
							color: '#333'
						}
					},
					axisLabel: {
						interval:0,
						rotate:40
					}
				},
				yAxis: {
					splitLine: {show: false},
					axisLine: {
						lineStyle: {
							color: '#333'
						}
					}
				},
				series: [{
					name: '警戒/汛期水位',
					type: 'line',
					smooth: true,
					showAllSymbol: true,
					symbol: 'emptyCircle',
					symbolSize: 9,
					data: y1,
					lineStyle: {
						normal: {
							color: '#AA666C',
							type: 'solid'
						}
					},
				}, {
					name: '水位',
					type: 'bar',
					barWidth: 4,
					itemStyle: {
						normal: {
							barBorderRadius: 5,
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: '#14c8d4'},
									{offset: 1, color: '#43eec6'}
								]
							)
						}
					},
					data: y2
				}, {
					name: '阈值1',
					type: 'bar',
					barGap: '-100%',
					barWidth: 4,
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: 'rgba(20,200,212,0.5)'},
									{offset: 0.2, color: 'rgba(20,200,212,0.2)'},
									{offset: 1, color: 'rgba(20,200,212,0)'}
								]
							)
						}
					},
					z: -12,
					data: y1
				}, ]
			})
		},
		getData(){
			// var url=reservoirInfo
			var url="http://172.21.129.156:8081/web/rain/reservoirInfo";
			this.$ajax({method: 'get',	url: url}).then((res)=>{

				this.data=res.data.DS;
				this.title.time=this.data.time;
				var _data;
				//console.log(res.data)
				if(this.type.hedao){
					_data=this.data.H;
				}else{
					_data=this.data.R;
				};
        setTimeout(()=>{
                this.doEchart(_data);
            },1000)
        })
        .catch(function(err){
            //console.log(err)
        })
		}

    },
	mounted(){
		this.$emit('refreshTop',this.title);
		this.getData();
		// this.doEchart();
	}
}
</script>

<style lang="less">
.check_box_C{
	cursor: pointer;
	float: left;
	margin-left: 5px;
	span{
		color: #333;
	}
	.check_box{
		display: inline-block;
		width: 8px;
		height: 8px;
		border: 1px solid #89dbf5;
	}
}
.active_leixin{
	.check_box{
		background: #89dbf5;
	}
	span{
		// color: #89dbf5;
		color: #333;
	}
}
.someTop{
	padding: 10px;

	&>div{
		margin-left: 10px;
	}
}
.float_right{
	float: right;
}
</style>
